<template>
  <ResultTable
    :columns="columns"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
    :scroll="{ x: 1500 }"
  >
    <template #bodyCell="{ column, text, record }">
      <!-- 运单状态 -->
      <template v-if="column.dataIndex === 'status'">
        <div
          class="table-column-status"
          :class="
            text === 1
              ? '1'
              : text === 2
              ? '2'
              : text === 3
              ? '3'
              : text === 4
              ? '4'
              : text === 5
              ? '5'
              : '6'
          "
        >
          {{
            text === 1
              ? '新建'
              : text === 2
              ? '已装车'
              : text === 3
              ? '到达'
              : text === 4
              ? '到达终端网点'
              : text === 5
              ? '已签收'
              : '拒收'
          }}
        </div>
      </template>
      <!-- 调度状态 -->
      <template v-if="column.dataIndex === 'schedulingStatus'">
        <div class="table-column-status" :class="text === 1 ? '1' : text === 2 ? '2' : '3'">
          {{ text === 1 ? '待调度' : text === 2 ? '未匹配线路' : '已调度' }}
        </div>
      </template>
      <!--  -->
      <!-- 操作 -->
      <template v-if="column.key === 'operation'">
        <a-button @click="$router.push(`/WayLook?id=${record.id}&orderId`)" type="link"
          >查看详情</a-button
        >
      </template>
    </template>
  </ResultTable>
</template>
<script setup>
import { ref } from 'vue'
import ResultTable from '@/components/ResultTable.vue'
// 表格头部数据
const columns = ref([
  {
    title: '序号',
    width: 100,
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    // 🚨注意：表格序号自动递增，分页后也不影响
    customRender: ({ index }) => (props.page - 1) * props.pageSize + index + 1,
  },
  {
    title: '运单编号',
    width: 160,
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    width: 180,
  },
  {
    title: '运单状态',
    dataIndex: 'status',
    key: 'status',
    width: 120,
  },
  {
    title: '调度状态',
    dataIndex: 'schedulingStatus',
    key: 'schedulingStatus',
    width: 100,
  },
  {
    title: '起始营业部',
    dataIndex: 'startAgencyName',
    key: 'startAgencyName',
    width: 150,
  },
  {
    title: '终点营业部',
    dataIndex: 'endAgencyName',
    key: 'endAgencyName',
    width: 150,
  },
  {
    title: '当前所在机构',
    dataIndex: 'currentAgencyName',
    key: 'currentAgencyName',
    width: 150,
  },
  {
    title: '下一个机构',
    dataIndex: 'nextAgencyName',
    key: 'nextAgencyName',
    width: 150,
  },
  {
    title: '货品总体积（立方米）',
    dataIndex: 'totalVolume',
    key: 'totalVolume',
    width: 180,
  },
  {
    title: '货品总重量（千克）',
    dataIndex: 'totalWeight',
    key: 'totalWeight',
    width: 150,
  },
  {
    title: '创建时间',
    dataIndex: 'created',
    key: 'created',
    width: 200,
  },
  {
    title: '更新时间',
    dataIndex: 'updated',
    key: 'updated',
    width: 200,
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
  },
])
// 接收数据
const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: () => [],
  },
  // 分页总数
  total: {
    type: Number,
    default: 0,
  },
  // 表格加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
})
const emit = defineEmits(['change', 'update:page', 'update:pageSize', 'edit'])
const onChange = ({ current, pageSize }) => {
  // 更新页码和页容量
  emit('update:page', current)
  emit('update:pageSize', pageSize)
  // 触发父组件的 change 事件
  emit('change', { page: current, pageSize: pageSize })
}
</script>
<style scoped>
#components-table-demo-summary tfoot th,
#components-table-demo-summary tfoot td {
  background: #fafafa;
}
[data-theme='dark'] #components-table-demo-summary tfoot th,
[data-theme='dark'] #components-table-demo-summary tfoot td {
  background: #1d1d1d;
}
.table-column-status {
  display: block;
}
</style>
